<template>
	<view class="userInfoPage">
		<nav-bar title="个人信息" bgColor="#ffb72f" titleColor="#fff" :supportWhiteBlack="true" />
		<view class="content">
			<view v-for="(item, index) in list" :key="index" class="row">
				<view class="title">{{ item.title }}</view>
				<view v-if="item.type === 'headPic'" class="headPic"><xh-img :src="item.txt" /></view>
				<view v-else class="txt">{{ item.txt }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: ''
		};
	},
	mounted() {
		let { headPic, name, phone, role } = this.$Route.query.userData;
		this.list = [
			{
				title: '头像',
				txt: headPic,
				type: 'headPic'
			},
			{
				title: '名称',
				txt: name
			},
			{
				title: '手机号',
				txt: phone
			},
			{
				title: '角色',
				txt: role
			}
		];
	}
};
</script>
<style lang="scss" scoped>
.userInfoPage {
	.content {
		padding: 20rpx;
		box-sizing: border-box;
		.row {
			width: 100%;
			margin-bottom: 30rpx;
			padding: 8rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			background-color: white;
			align-items: center;
			.headPic {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				overflow: hidden;
			}
		}
	}
}
</style>
